<template>
  <view class="container">
    <uni-forms ref="form" :model="formData" :rules="rules" validate-trigger="bind">
      <!-- 咨询人类型 -->
      <view class="form-item">
        <text class="label">咨询人类型：</text>
        <text class="static-text">本人</text>
      </view>

      <!-- 姓名 -->
      <uni-forms-item label="姓名：" name="name" required>
        <uni-easyinput 
          v-model="formData.name"
          placeholder="请输入姓名"
          clearable
        />
      </uni-forms-item>

      <!-- 公司 -->
      <view class="form-item">
        <text class="label">公司：</text>
        <text class="static-text">宝洁/P&G</text>
      </view>

      <!-- 所在城市 -->
      <uni-forms-item label="所在城市：" name="city" required>
        <uni-data-picker
          v-model="formData.city"
          placeholder="请选择城市"
          :localdata="cityOptions"
        />
      </uni-forms-item>

      <!-- 性别 -->
      <uni-forms-item label="性别：" name="gender" required>
        <radio-group v-model="formData.gender">
          <label class="radio-item">
            <radio value="male" color="#007AFF" /> 男
          </label>
          <label class="radio-item">
            <radio value="female" color="#007AFF" /> 女
          </label>
        </radio-group>
      </uni-forms-item>

      <!-- 年龄 -->
      <uni-forms-item label="年龄：" name="age" required>
        <uni-easyinput 
          v-model="formData.age"
          type="number"
          placeholder="请输入年龄"
          clearable
        />
      </uni-forms-item>

      <!-- 手机号码 -->
      <uni-forms-item label="手机号码：" name="phone" required>
        <uni-easyinput 
          v-model="formData.phone"
          type="number"
          placeholder="请输入手机号"
          clearable
        />
      </uni-forms-item>

      <!-- 员工工号 -->
      <uni-forms-item label="员工工号：" name="employeeId">
        <uni-easyinput 
          v-model="formData.employeeId"
          placeholder="员工工号"
          clearable
        />
      </uni-forms-item>

      <!-- 主题 -->
      <view class="form-item">
        <text class="label">主题：</text>
        <text class="static-text">情感家庭-恋爱关系</text>
      </view>

      <!-- 与咨询人关系 -->
      <view class="form-item">
        <text class="label">与咨询人关系：</text>
        <text class="static-text">配偶</text>
      </view>

      <!-- 特殊声明 -->
      <uni-forms-item label="声明：" name="declarations" required>
        <view class="checkbox-group">
          <label 
            v-for="(item, index) in declarationList"
            :key="index"
            class="checkbox-item"
          >
            <checkbox 
              :value="item.value"
              :checked="formData.declarations.includes(item.value)"
              @change="handleCheckboxChange(item.value, $event)"
            />
            {{ item.label }}
          </label>
        </view>
      </uni-forms-item>

      <!-- 知情同意书 -->
      <uni-forms-item label="知情同意书：" name="agreement" required>
        <label class="agreement-checkbox">
          <checkbox 
            value="agreement"
            :checked="formData.agreement"
            @change="formData.agreement = $event.detail.value"
          />
          同意《即时倾诉知情同意书》
        </label>
      </uni-forms-item>

      <!-- 提交按钮 -->
      <button 
        class="submit-btn"
        type="primary"
        @click="submitForm"
      >
        提交预约
      </button>
    </uni-forms>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        city: '',
        gender: '',
        age: '',
        phone: '',
        employeeId: '',
        declarations: [],
        agreement: false
      },
      rules: {
        name: {
          rules: [{ required: true, errorMessage: '姓名不能为空' }]
        },
        city: {
          rules: [{ required: true, errorMessage: '请选择城市' }]
        },
        gender: {
          rules: [{ required: true, errorMessage: '请选择性别' }]
        },
        age: {
          rules: [
            { required: true, errorMessage: '年龄不能为空' },
            { pattern: /^(?:[1-9][0-9]?|1[01][0-9]|120)$/, errorMessage: '请输入有效年龄' }
          ]
        },
        phone: {
          rules: [
            { required: true, errorMessage: '手机号不能为空' },
            { pattern: /^1[3-9]\d{9}$/, errorMessage: '手机号格式不正确' }
          ]
        },
        declarations: {
          rules: [{ required: true, errorMessage: '请确认声明项' }]
        },
        agreement: {
          rules: [{ required: true, errorMessage: '请阅读并同意知情同意书' }]
        }
      },
      declarationList: [
        { value: 'suicide', label: '1. 自杀念头或计划' },
        { value: 'harm', label: '2. 伤害自身或他人的想法' },
        { value: 'mental', label: '3. 有经医院确诊的精神疾患' },
        { value: 'underage', label: '4. 不满18岁' }
      ],
      cityOptions: [
        { text: '北京', value: 'beijing' },
        { text: '上海', value: 'shanghai' },
        { text: '广州', value: 'guangzhou' },
        { text: '深圳', value: 'shenzhen' }
      ]
    }
  },
  methods: {
    handleCheckboxChange(value, e) {
      const checked = e.detail.value
      const index = this.formData.declarations.indexOf(value)
      if (checked && index === -1) {
        this.formData.declarations.push(value)
      } else if (!checked && index > -1) {
        this.formData.declarations.splice(index, 1)
      }
    },
    async submitForm() {
      try {
        await this.$refs.form.validate()
        // 这里添加实际提交逻辑
        uni.showToast({ title: '提交成功', icon: 'success' })
        console.log('表单数据：', this.formData)
      } catch (errors) {
        uni.showToast({ title: '请检查表单填写', icon: 'none' })
        console.log('验证失败：', errors)
      }
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20rpx;
  background: #f5f5f5;
  min-height: 100vh;
}

.form-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  background: #fff;
  margin-bottom: 20rpx;
  border-radius: 12rpx;
}

.label {
  width: 180rpx;
  padding-left: 20rpx;
  color: #666;
  font-size: 28rpx;
}

.static-text {
  flex: 1;
  color: #333;
  font-size: 28rpx;
  padding-right: 20rpx;
}

.radio-item {
  margin-right: 40rpx;
  display: flex;
  align-items: center;
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.checkbox-item {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: #666;
}

.agreement-checkbox {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  color: #666;
}

.submit-btn {
  margin-top: 40rpx;
  background: #007AFF;
  border-radius: 50rpx;
}

/* 覆盖uni-ui默认样式 */
:deep(.uni-forms-item__label) {
  width: 180rpx !important;
  font-size: 28rpx !important;
}

:deep(.uni-easyinput__content) {
  padding: 10rpx 0;
}
</style>